<template>
  <view class="container tar-bar">
    <view class="head-box">
      <!-- 用户信息 -->
      <view class="user-info">
        <!-- 是否登录 -->
        <block v-if="isLogin">
          <view class="user-portrait">
            <image :src="userInfo.avater" mode="widthFix" />
          </view>
          <view class="user-detail">
            <view class="user-nickname">{{ userInfo.nick_name }}</view>
            <view class="user-intro">
              {{ userInfo.phone ? userInfo.phone : "" }}
            </view>
          </view>
        </block>
        <block v-else>
          <view class="user-portrait">
            <image :src="userInfo.avater" mode="widthFix" />
          </view>
          <view class="user-detail">
            <view class="user-nickname">{{ userInfo.nick_name }}</view>
            <view class="user-btn" @click="authLogin"> 完善信息 </view>
          </view>
        </block>

        <view class="user-info-icon">
          <navigator url="./message" open-type="navigate">
            <image src="../../static/notice.png" mode="widthFix" />
          </navigator>
        </view>
      </view>
      <!-- 会员开通 -->
      <!-- <view class="members">
        <view class="members-icon">
          <image src="../../static/members.png" mode="widthFix" />
        </view>
        <view class="members-text">加入会员解锁高级功能</view>
        <view class="members-btn">立即开通</view>
      </view> -->
    </view>

    <!-- 功能列表 -->
    <view class="fun-list">
      <navigator url="./collection" open-type="navigate">
        <view class="list-item">
          <view class="item-left">
            <i class="fun-icon collection-icon"></i>
            <span>我的收藏</span>
          </view>
          <view class="item-right iconfont icon-arrow-right"></view>
        </view>
      </navigator>
      <navigator url="./invite" open-type="navigate">
        <view class="list-item">
          <view class="item-left">
            <i class="fun-icon invite-icon"></i>
            <span>邀请好友</span>
          </view>
          <view class="item-right iconfont icon-arrow-right"></view>
        </view>
      </navigator>
      <navigator url="./help" open-type="navigate">
        <view class="list-item">
          <view class="item-left">
            <i class="fun-icon help-icon"></i>
            <span>帮助指南</span>
          </view>
          <view class="item-right iconfont icon-arrow-right"></view>
        </view>
      </navigator>
      <navigator url="./advice" open-type="navigate">
        <view class="list-item">
          <view class="item-left">
            <i class="fun-icon advice-icon"></i>
            <span>建议与反馈</span>
          </view>
          <view class="item-right iconfont icon-arrow-right"></view>
        </view>
      </navigator>
      <navigator url="./setting" open-type="navigate">
        <view class="list-item">
          <view class="item-left">
            <i class="fun-icon setting-icon"></i>
            <span>设置</span>
          </view>
          <view class="item-right iconfont icon-arrow-right"></view>
        </view>
      </navigator>
    </view>

    <TabBar :tabbar="tabbar" />
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import TabBar from "../../component/TabBar/TabBar";
// 接口文件
const { login, changeUsersInfo, getUserInfo } = require("../../api/user/user");

export default {
  props: {},
  components: { TabBar },
  data() {
    return {
      // 是否登录
      isLogin: false,
    };
  },
  computed: {
    ...mapState(["tabbar", "userInfo"]),
  },
  watch: {},
  methods: {
    ...mapMutations([
      "editTabbar",
      "editUserInfo",
      "editOpenId",
      "editIsGetDataAgain",
    ]),

    // 授权登录
    authLogin() {
      let code = "";
      // 获取登录 code
      uni.login({
        success: loginRes => {
          code = loginRes.code;
        },
        fail: () => {
          uni.showToast({ title: "微信登录授权失败", icon: "none" });
          return;
        },
      });

      // 获取用户信息
      uni.getUserProfile({
        desc: "登录",
        success: userProfile => {
          // 发送登录请求
          login({ code })
            .then(
              // 成功
              res => {
                // 缓存数据
                uni.setStorageSync("openId", res.openid);
                uni.setStorageSync("token", res.token);
                return userProfile.userInfo;
              },
              // 失败
              err => {
                console.log(err);
              }
            )
            // 修改用户信息
            .then(res => {
              // 把用户信息存储到服务器
              let openid = uni.getStorageSync("openId");
              let params = {
                openid,
                avater: res.avatarUrl,
                nick_name: res.nickName,
              };
              // 修改请求
              changeUsersInfo(params).then(
                // 成功
                () => {
                  this.editIsGetDataAgain(true);
                  // 获取用户数据
                  let params = { openid };
                  getUserInfo(params).then(
                    res => {
                      // 设置用户全局对象 userInfo 的数据
                      this.editUserInfo(res);
                      this.isLogin = true;
                    },
                    err => {
                      console.log(err);
                    }
                  );
                },
                // 失败
                err => {
                  console.log(err);
                  return false;
                }
              );
            });
        },
        fail: err => {
          console.log(err);
        },
      });
    },

    //检查是否登录
    checkLogin() {
      let openid = uni.getStorageSync("openId");
      this.isLogin = openid ? true : false;

      this.checksession().then(res => {
        if (!res) return;
        // 获取用户数据
        getUserInfo({ openid }).then(
          res => {
            this.editUserInfo(res);
          },
          err => {
            console.log(err);
          }
        );
      });
    },

    //验证登录是否过期
    checksession() {
      return new Promise((resolve, reject) => {
        uni.checkSession({
          success: res => {
            // console.log(res, "登录未过期");
            resolve(true);
          },
          fail: res => {
            // console.log(res, "登录过期了");
            this.isLogin = false;
            resolve(false);
          },
        });
      });
    },
  },
  created() {
    // 设置tabbar数据
    this.editTabbar();
    // 检查是否登录
    this.checkLogin();
  },
  onShow() {},
  mounted() {},
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.head-box {
  position: relative;
  height: 270rpx;
  background-color: #e1e3fb;
  border: 1px transparent solid;
  border-radius: 0px 0px 32px 32px;
  // 用户信息
  .user-info {
    display: flex;
    position: relative;
    margin: 30rpx;

    .user-portrait {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      overflow: hidden;
    }

    .user-detail {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 0 30rpx;
      font-family: PingFang SC;
      font-weight: 500;

      .user-nickname {
        height: 50rpx;
        line-height: 50rpx;
        font-size: 36rpx;
      }

      .user-intro {
        height: 34rpx;
        line-height: 34rpx;
        font-size: 24rpx;
        color: #666666;
      }

      .user-btn {
        width: 152rpx;
        height: 60rpx;
        margin-top: 16rpx;
        background-color: #ffffff;
        border-radius: 100rpx;
        text-align: center;
        color: #666ee8;
        font-size: 28rpx;
        line-height: 60rpx;
      }
    }

    .user-info-icon {
      position: absolute;
      top: 0;
      right: 0;
      width: 40rpx;
      height: 40rpx;
    }
  }
  // 会员开通
  .members {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0;
    width: 690rpx;
    height: 116rpx;
    margin: 0 30rpx;
    padding: 0 30rpx;
    transform: translateY(50%);
    border-radius: 16rpx;
    background-image: linear-gradient(to right, #f0cfb4, #f8b958);
    font-family: PingFang SC;

    .members-icon {
      width: 70rpx;
      height: 56rpx;
    }

    .members-text {
      padding: 0 30rpx;
      font-size: 28rpx;
    }

    .members-btn {
      position: absolute;
      right: 30rpx;
      width: 156rpx;
      height: 56rpx;
      background-color: #333333;
      border-radius: 100rpx;
      text-align: center;
      color: #ffffff;
      line-height: 56rpx;
      font-size: 24rpx;
    }
  }
}
// 功能列表
.fun-list {
  padding: 30rpx;

  .list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 34rpx 30rpx;
    border-bottom: 2rpx solid #f7f8fe;
    background-color: #ffffff;
    border-radius: 8rpx;
    font-size: 28rpx;
    color: #333333;

    .item-left {
      flex: 9;
      display: flex;
      align-items: center;
      .fun-icon {
        width: 38rpx;
        height: 34rpx;
        margin-right: 22rpx;
        background-repeat: no-repeat;
        background-size: cover;
      }
    }
    .item-right {
      flex: 1;
      text-align: right;
    }

    .collection-icon {
      background-image: url("../../static/collection.png");
    }
    .invite-icon {
      background-image: url("../../static/Invite friends.png");
    }
    .help-icon {
      background-image: url("../../static/guide.png");
    }
    .advice-icon {
      background-image: url("../../static/advice.png");
    }
    .setting-icon {
      background-image: url("../../static/set.png");
    }
  }
}
</style>
